<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cm内容服务</title>
<link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header"></div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="/cmServer" method="get">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间戳</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" id="timestamp" readonly  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">响应时间</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" value={{costTime}} readonly  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div> 
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品ID</label>
                        <div class="layui-input-inline" style="width: 420px;">
                            {% if sku_id==0 %} 
                                <input type="text" id="input1" name="ToSearchSku_id" required lay-verify="required" placeholder="请输入要查找的商品id(1-350000),使用'A'符号分割可查询多个商品 " autocomplete="off" class="layui-input">
                            {% else %}
                                <input type="text" id="input1" value={{sku_id}}  name="ToSearchSku_id" required lay-verify="required" placeholder="请输入要查找的商品id(1-350000)" autocomplete="off" class="layui-input">
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" id="ok" lay-filter="formDemo" class="layui-btn layui-btn-radius layui-btn-normal"><i class="layui-icon layui-icon-search">&nbsp;&nbsp;</i><cite>查找</cite></button>
                        <button type="button" onclick="setnull()" class="layui-btn layui-btn-primary layui-border-red">重新输入</button>
                    </div>
                </div>
            </form>  
        </div>
    </div>        
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	</fieldset>
    <div class="layui-card">
        <div class="layui-card-header" style="font-size: 15px;">商品信息</div>
        <div class="layui-card-body">
            <table align="center" class="layui-table">
                <thead>
                    <tr>
                        <td>商品编号</td>
                        <td>所属品牌</td>
                        <td>店铺编号</td>
                        <td>所属品类</td>
                    </tr>
                </thead>
                <tbody>
                    {% for item in result %}
                    <tr>
                        <td> {{ item['sku_id'] }}</td>
                        <td> {{ item['brand'] }}</td>
                        <td> {{ item['shopid'] }}</td>
                        <td> {{ item['cate'] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>            
	<div class="layui-card">
        <div class="layui-card-header" style="font-size: 15px;">源信息</div>
        <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title">
                <span class="layui-badge layui-bg-blue">cmService</span>
                {% if originData==0 %}
                    <div class="layui-field-box">
                        这里展示的是服务器端传来的原始数据
                    </div>
                {% else %}
                    <div class="layui-field-box">
                        {{originData}}
                    </div>
                {% endif %}
            </fieldset>
        </div>
    </div>    
    <input type="text" id="code" value={{stateCode}} hidden> 
</body>
</html>
<script src="{{ url_for('static', filename = 'layui/layui.js') }}" charset="utf-8"></script>
<script type="text/javascript">
layui.use('layer', function(){
    var layer = layui.layer;
    $(document).ready(function(){
        var code=$("#code").val()
         //通过状态码提示用户是否查询成功
        if(code==200){
            layer.msg('查找成功！', {icon: 1,time:1500});
            changetablesize();
        }
        if(code==500){
            layer.msg('查找失败，该商品不存在！', {icon: 2,time:1500});
            changetablesize();
        }
    }); 
}); 
//时间戳时间设置
layui.use('util',function(){
    var util = layui.util
    var dateString = util.toDateString(new Date(), "yyyy-MM-dd HH:mm:ss"); //执行转换日期格式的方法
    $('#timestamp').val(dateString);
})


layui.use('form', function(){
    var form = layui.form;
    $("#ok").on("click",function(){
        var index = layer.load(1, {shade: false});
    })
  //监听提交
    form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });
});

//重新输入按钮的功能
function setnull(){
    $("#input1").val('');
};
function changetablesize(){
    var width=$(window).width();
    if(width<500){
        $(".layui-table").attr("lay-size","sm");
    }else{
        $(".layui-table").removeAttr("lay-size");
    }
}

//监听窗口大小变化，动态改变表格大小
window.onresize=changetablesize;
</script>

